/**
 * vue插件: 注册全局指令
 */
import { useIntersectionObserver } from '@vueuse/core'
import Def from '@/assets/images/load.gif'
export default {
  install (app) {
    console.log('指令', app)
    app.directive('imglazy', {
      // vue2: inserted -> vue3: mounted
      /**
       *
       * @param {*} el img的dom对象
       * @param {*} binding.value 指令绑定的图片地址
       */
      mounted (el, binding) {
        console.log('执行: ', el)
        const { stop } = useIntersectionObserver(
          el,
          // isIntersecting 监控数据的回调函数,页面刷新执行一次,没进入执行false, 进入执行true
          ([{ isIntersecting }]) => {
            // console.log('监控回调函数: ', isIntersecting)
            if (isIntersecting) {
              el.src = Def
              // console.log('进入可视区域了,发请求')
              // 看效果,可以延时 (实际开发不加)
              setTimeout(() => {
                el.src = binding.value
              }, 2000)
              // 加载失败
              el.onerror = () => {
                // 图片加载失败,显示默认图片
                el.src = Def
              }
              // stop() 关闭监控, 不关闭会反复执行发请求
              stop()
            }
          },
          { threshold: 0 } // 0代表刚进入就执行
        )
      }
    })
  }
}
